<template>
	<view>
		<view class="flex grey">
			<view style="flex-grow: 1;">
				<time-pickers ref='date-time' type='datetime-all' @change="change($event , 'startDate')">
					{{startDate ? startDate : startText}}
				</time-pickers>
			</view>
			<view class="plr5">~</view>
			<view style="flex-grow: 1;text-align: right;">
				<time-pickers ref='date-time' type='datetime-all' @change="change($event , 'endDate')">
					<view>{{endDate ? endDate : endText}}</view>
				</time-pickers>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			startText : {
				type : String ,
				default : "请选择"
			},
			endText : {
				type : String ,
				default : "请选择"
			}
		},
		data() {
			return {
				startDate : "" ,
				endDate : ""
			};
		},
		methods: {
			change : function(e , key){
				this[key] = e.fmt10 + ':00' ;
				this.emit();
			},
			
			cancel : function(e , key){
				this[key] = '' ;
				this.emit();
			},
			
			emit : function(e){
				this.$emit("change" , {
					startDate : this.startDate  ,
					endDate : this.endDate 
				});
			},
			
		}
	}
</script>